/**
 * 开卡日志列表
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" class="margin-t10">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>开卡日志</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="boxBlock"> 
        <div class="serachTop"> 
              <!-- 搜索筛选 -->
            <el-form :inline="true" :model="formInline" class="user-search"> 
              <el-form-item>
                <el-input
                  size="small"
                  v-model="formInline.userId"
                  placeholder="输入用户ID"
                  type="number" 
                  clearable
                ></el-input>
              </el-form-item>  
              <el-form-item>
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-search"
                  @click="search"
                >
                  搜索
                </el-button>  
              </el-form-item>
            </el-form>
        </div> 
  
    <!--列表-->
    <div class="ra_box"> 
      <el-table
        size="small"
        :data="listData"
        highlight-current-row
        v-loading="loading"
        element-loading-text="拼命加载中"
        style="width: 100%" 
      >  
        <el-table-column prop="userId" label="用户ID" fixed="left" > </el-table-column> 
        <el-table-column prop="cardNum" label="开卡数量" show-overflow-tooltip>  </el-table-column>
        <el-table-column prop="successNum" label="成功数量" show-overflow-tooltip>  </el-table-column>
        <el-table-column prop="errorNum" label="失败数量" show-overflow-tooltip>  </el-table-column> 
        <el-table-column prop="remark" label="备注" show-overflow-tooltip> </el-table-column> 
        <el-table-column
          prop="starTime"
          label="开始时间"
          show-overflow-tooltip
        >
           <template slot-scope="scope">
              {{ timestampToTime(scope.row.starTime) }} 
            </template>
        </el-table-column>   
        <el-table-column
          prop="endTime"
          label="结束时间"
          show-overflow-tooltip
        >
           <template slot-scope="scope">
              {{ timestampToTime(scope.row.endTime) }}
            </template>
        </el-table-column> 
          
        <el-table-column align="left" label="操作" width="180" fixed="right" >
            <template slot-scope="scope">  
              <el-button size="mini"   type="success" plain @click="handleEdit(scope.row)" >
                详情
              </el-button>   
            </template>
          </el-table-column>
      </el-table>
    </div>
    <!-- 分页组件 -->
    <Pagination
      v-bind:child-msg="pageparm"
      @callFather="callFather"
    ></Pagination>
  </div>


  <el-dialog
      :close-on-click-modal="false"
      title="详情"
      :visible.sync="addFormVisible"
      width="40%"
      @close="closeDialog('refundForm')"
    >
    <el-table
        size="small"
        :data="resData"
        highlight-current-row 
        element-loading-text="拼命加载中"
        style="width: 100%" 
      >  
        <el-table-column prop="requestId" label="请求ID"> </el-table-column> 
        <el-table-column prop="reason" label="失败原因" >  </el-table-column>
       
    </el-table>
       
    </el-dialog> 
 
 
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import {
  setStoreS,
  getStoreS,
  removeStoreS,
  insertCharacter,
  timestampToTime,
  spStr,
} from "../../utils/util";
import {
  baseURL,
  req,
  reqJson,
  encrypt,
  decrypt,
  reqtoken,
  service,
  format,
  getUrl,
} from "../../api/axiosFun";
import Pagination from "../../components/Pagination";
export default {
  data() {
    return {
      loading: false, 
      addFormVisible: false, 
      b: format,
      timestampToTime: timestampToTime,
      formInline: {
        pageNum: 1,
        pageSize: 10,
        name: "",
        userId: "",
      },
      refundForm: { 
      }, 
      // rules表单验证
      refundrules: {
        status: [
          { required: true, message: "请选择状态", trigger: "blur" }, 
        ],
      },
   
      options: [],
      listData: [], //用户数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
      userInfo:{}, 
      resData:[] 
      

    };
  },
  // 注册组件
  components: {
    Pagination,
  },
  created() {
    this.getdata(this.formInline);
    if(this.$store.state.user){
        this.userInfo = JSON.parse(this.$store.state.user);
    }
  },
  computed: {
    ...mapGetters(["getUser"]), 
  },
  watch: {
    getUser(newVal) {
      this.userInfo = JSON.parse(newVal); 
    },
  }, 
  methods: {
    getdata(parameter) {
      
      let url = getUrl({
        ...parameter,
        channel:1
      });  
      let objectUrl = 'admin' 
      if(this.$store.state.user){
        this.userInfo = JSON.parse(this.$store.state.user);
      }  
      
      if(this.userInfo.userType=='01'  || this.userInfo.userType=='02'){ 
        objectUrl = 'photon/cardApplyLogs' 
      }else{ 
        objectUrl = 'admin/cardApplyLogs'
      }    

      service
        .get("/api/"+objectUrl + url, {})
        .then((res) => {
          this.loading = false;
          if (res.code == 0) {
            this.listData = res.rows;
            this.pageparm.currentPage = this.formInline.pageNum;
            this.pageparm.pageSize = this.formInline.pageSize;
            this.pageparm.total = res.total;
          } else {
            this.$message({
              type: "info",
              message: spStr(res.msg, "PhotonPay", ""),
            });
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },
 
    // 分页插件事件
    callFather(parm) {
      this.formInline.pageNum = parm.currentPage;
      this.formInline.pageSize = parm.pageSize;
      this.getdata(this.formInline);
    },
    // 搜索事件
    search() {
      this.getdata(this.formInline);
    },
    handleEdit(row) {
        this.addFormVisible = true;   
        let objectUrl = ''
        if(this.userInfo.userType=='01'  || this.userInfo.userType=='02'){ 
          objectUrl = 'photon/cardApplyLogsInfos' 
        }else{ 
          objectUrl = 'admin/cardApplyLogsInfos'
        }   
        this.refundForm.channel=0;
        service
        .get("/api/"+objectUrl+"/"+row.id, this.refundForm)
        .then((res) => { 
            if (res.code == 0) {
            this.resData = res.rows;
            } else {
            this.$message({
                type: "info",
                message: res.msg,
            });
            }
        })
        .catch((err) => {
            this.$message.error(spStr(err, "PhotonPay", ""));
        }); 
        
    }, 
 
 
    // 关闭编辑、增加弹出框
    closeDialog(name) {
        this.addFormVisible = false; 
        this.$refs.refundForm.resetFields();
    }, 
 
  },
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
/deep/ .el-table .row-expand-cover .cell .el-table__expand-icon {
  display: none;
}
.myForm .el-form-item {
  /* display: inline-block;
  margin-left: 5%; */
}

.el-form .select10 .el-select {
  width: 100%;
}
</style>

 
 